<template>
  <view class="register-drug">
    <div class="tip">您可以通过以下方式上传你的常用药信息</div>

    <div class="operation">
      <div class="operation-photo" @click="scan">
        <div class="title">拍药盒</div>
        <div class="des">拍药盒搜药品</div>
      </div>
      <div class="operation-search" @click="search">
        <div class="title">搜药名</div>
        <div class="des">按药名搜药品</div>
      </div>
    </div>

    <div class="drugs-list">
      <div v-for="(item, key) in drugList" :key="item.baseDrugId" class="drug-box">
        <image class="icon" :src="icon" @click="delDrug(key)"></image>

        <image v-if="item.outerPackagePicUrl" class="drug-img" :src="item.outerPackagePicUrl"></image>
        <image v-else class="drug-img" :src="zwtp"></image>
        <div class="drug-info">
          <div class="title">{{ item.commonName }}</div>

          <div class="spe">
            {{ item.preparationUnit }}*{{ item.packageSize }}{{ item.minimumUnit }}/{{ item.packageUnit }}
          </div>

          <view class="usage">
            <text>每天吃几次</text>
            <view class="sele">
              <picker
                class="select-view"
                mode="selector"
                :value="dayFrequencyIndex"
                :range="dayFrequencyArray"
                @change="bindMultiPickerChange"
              >
                <view :class="[dayFrequencyIndex !== Number(0) ? 'select-con' : '']">
                  {{ dayFrequencyArray[dayFrequencyIndex] }}
                  <image class="position-icon" :src="down"></image>
                </view>
              </picker>
            </view>
          </view>
          <view class="every">
            <text>每天吃几粒</text>
            <view class="every-view">
              <div class="add" @click="min">-</div>
              <div class="num">{{ everyTime }}</div>
              <div class="add" @click="add">+</div>
            </view>
          </view>
        </div>
      </div>
    </div>
    <!-- <div class="zwsj"></div> -->

    <div class="zhanwei"></div>
    <div class="bottom-box">
      <div class="bottom-opt">
        <div class="box-left">
          已添加 <span class="total">{{ drugList.length }}</span> 种药品
        </div>
        <div class="box-right" @click="save">保存记录</div>
      </div>
    </div>
  </view>
</template>

<script>
import icon from '@/static/icon/close.png';
import down from '@/static/icon/a-down.png';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      zwtp: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zwtp.png',
      icon,
      down,
      dayFrequency: '', // 每天吃几次
      dayFrequencyArray: ['请选择', '每日一次', '每日两次', '每日三次', '每日四次', '每夜一次', '每周一次'],
      dayFrequencyIndex: 0,
      everyTime: 1 // 每次吃几粒
    };
  },

  computed: {
    ...mapState('assess', {
      drugList: 'drugs'
    })
  },

  onLoad: function (opt) {
    this.init();
  },

  methods: {
    async init() {
      console.log(this.drugList);
      // const patientid = wx.getStorageSync('patientid');
    },

    // 每天吃几次选择弹窗
    bindMultiPickerChange(e) {
      this.dayFrequencyIndex = e.detail.value;
    },

    // 点击扫药盒
    scan() {
      this.$wxPromise.navigateTo({
        url: '/pages/scanDrug/index'
      });
    },

    // 点击搜药名
    search() {
      this.$wxPromise.navigateTo({
        url: '/pages/searchDrug/index'
      });
    },

    min() {
      if (this.everyTime <= 0) return;
      this.everyTime -= 0.5;
    },

    add() {
      this.everyTime += 0.5;
    },

    // 删除药品
    delDrug() {},

    save() {
      this.$wxPromise.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss">
page {
  min-height: 100%;
}
.register-drug {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  position: relative;
  .tip {
    color: #999999;
    font-size: 28rpx;
    padding: 24rpx;
  }
  .operation {
    display: flex;
    justify-content: space-evenly;
    color: #ffffff;
    margin-top: 8rpx;
    margin-bottom: 40rpx;
    &-photo {
      box-shadow: rgba(0, 0, 0, 0.15) 0px 10rpx 30rpx 0px;
      width: 340rpx;
      height: 188rpx;
      padding-left: 32rpx;
      box-sizing: border-box;
      background-image: url('https://img.wanhuhealth.com/images/welfare/camera.png');
      background-repeat: no-repeat;
      background-origin: border-box;
      background-size: contain;
      background-position: bottom;
      border-radius: 24rpx;
    }
    &-search {
      box-shadow: rgba(0, 0, 0, 0.15) 0px 10rpx 30rpx 0px;
      width: 340rpx;
      height: 188rpx;
      padding-left: 32rpx;
      box-sizing: border-box;
      background-image: url('https://img.wanhuhealth.com/images/welfare/search.png');
      background-repeat: no-repeat;
      background-origin: border-box;
      background-size: contain;
      background-position: bottom;
      border-radius: 24rpx;
    }
    .title {
      font-size: 40rpx;
      font-weight: bold;
      margin-top: 36rpx;
    }
    .des {
      font-size: 28rpx;
    }
  }

  .drug-box {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 56rpx 28rpx 48rpx 34rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    margin: 24rpx;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4rpx 8rpx 0px;
    .icon {
      width: 56rpx;
      height: 56rpx;
      position: absolute;
      top: 12rpx;
      right: 12rpx;
    }
  }
  .drug-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 28rpx;
  }
  .drug-info {
    flex: 1;
    .title {
      width: 446rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 32rpx;
      color: #222222;
      line-height: 1.3em;
      margin-bottom: 8rpx;
    }
    .spe {
      font-size: 28rpx;
      color: #b2b2b2;
      margin-bottom: 28rpx;
    }
    .fre {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6);
    }
    .usage {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 32rpx;
    }
    .sele {
    }
    .step {
      width: 320rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 40rpx;
      .btn {
        width: 88rpx;
        height: 56rpx;
        background: #f3f3f3;
        border-radius: 8rpx;
        text-align: center;
        line-height: 46rpx;
        font-size: 40rpx;
      }
    }
    .select-view {
      width: 320rpx;
      height: 56rpx;
      background: #f4f4f4;
      border-radius: 8rpx;
      line-height: 56rpx;
      text-align: center;
      position: relative;
      padding-right: 40rpx;
      box-sizing: border-box;
    }
    .select-con {
      color: rgba(0, 0, 0, 0.9);
    }
    .position-icon {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      top: 50%;
      margin: -19rpx 0 0;
      right: 2px;
    }
    .every {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
    }
    .every-view {
      width: 320rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .add {
      width: 88rpx;
      height: 56rpx;
      background: #f4f4f4;
      border-radius: 8px;
      font-size: 36rpx;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
    }
    .num {
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .zhanwei {
    background: #ffffff;
    height: 200rpx;
    visibility: hidden;
  }
  .bottom-box {
    background: #ffffff;
    width: 100%;
    height: 172rpx;
    left: 0;
    bottom: 0;
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-opt {
    display: flex;
    justify-content: space-between;
    box-sizing: content-box;
    align-items: center;
    margin: 24rpx;
  }
  .box-left {
    color: rgba(0, 0, 0, 0.7);
    font-size: 36rpx;
  }
  .box-right {
    width: 328rpx;
    height: 88rpx;
    font-size: 36rpx;
    border-radius: 44rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  }
  .total {
    color: #10aeff;
    font-weight: bold;
    padding: 0 6rpx;
  }
}
</style>
